<template>
  <div class="question-describe ss-display">
    <span
      :class="['ta-l', state.size, state.weight, state.spacing, state.color]"
      >{{ state.text }}</span
    >
  </div>
</template>

<script setup>
import { defineProps, reactive } from "vue";

const props = defineProps({
  msg: Object,
});

const state = reactive({
  size: props.msg?.size || "fs14",
  weight: props.msg?.weight || "fw100",
  spacing: props.msg?.spacing || "ls2",
  color: props.msg?.color || "white",
  text: props.msg?.text || "默认类型文字",
});
</script>

<style scoped>
.question-describe {
  padding-top: 10px;
}
</style>
